<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="row mb-3">
                <strong class="col-md-4" style="text-align:right">房源名称：</strong>
                <strong class="col-md-8" style="text-align:left">{{data.houseName}}</strong>
            </div>
            <div v-if="!(role === 'user')" class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center">
                        用户名： {{data.customerName}}
                    </h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center">问题： {{data.title}}</h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <p>处理情况：</p>
                <div>
                    <badge type="danger" v-if="tobeprocess">未处理</badge>
                    <badge type="warning" v-else-if="processing">处理中</badge>
                    <badge type="primary" v-else-if="processed">已处理</badge>
                    <badge type="success" v-else>已评价</badge>
                </div>
                <div v-if="!tobeprocess && !(role === 'worker')" class="col-md-1"><p style="text-align:center">|</p></div>
                <p v-if="!tobeprocess && !(role === 'worker')">处理人： {{data.workerName}}</p>
            </div>
            <div class="row justify-content-center">
                <base-button @click="openWorkOrder" c type="primary">详情</base-button>
                <base-button v-show="role === 'admin' && workerId === 0" type="primary" v-b-modal="'modal-' + this.oid">分配处理师傅</base-button>
                <b-modal :id="'modal-' + this.oid" title="选择师傅" >
                    <form role="form">
                        <div class="justify-content-center">
                            <b-select class="mb-3" v-model="selected" :options="options"></b-select>
                            <div class="row mb-3">
                                <base-button type="primary" @click="toAssignWorker" class="contentDiv">{{submitText}}</base-button>
                            </div>
                            <div v-if="showSaveSuccess" class="row justify-content-center">
                                <small class="text-success">保存成功</small>
                                <i class="fa fa-check"></i>
                            </div>
                            <div v-if="showSaveFail" class="row justify-content-center">
                                <small class="text-danger">保存失败</small>
                                <i class="fa fa-times"></i>
                            </div>
                        </div>

                    </form>
                    <template slot="modal-footer" slot-scope="{ok}">
                        <!-- Emulate built in modal footer ok and cancel button actions -->
                        <b-button size="sm" variant="success" @click="myOk">
                            完成
                        </b-button>
                    </template>
                </b-modal>
            </div>
            <hr>
        </div>
    </div>
</template>

<script>
    import {assignWorker} from "../../api";

    export default {
        name: "workOrderComponent",
        data(){
            return {
                selected: null,
                showSaveSuccess: false,
                showSaveFail: false,
                data: {
                    tobeprocess: null,
                    processing: null,
                    oid: null,
                    houseName: null,
                    customerName: null,
                    workerName: null,
                    role: null,
                    title: null
                },
                submitText: "保存"
            }
        },
        props:['msg'],
        computed: {
            tobeprocess(){
                return this.msg.state === 'unset';
            },
            processing(){
                return this.msg.state === 'set';
            },
            processed(){
                return this.msg.state === 'closed';
            },
            oid(){
                return this.msg.oid;
            },
            houseName(){
                return this.msg.houseName;
            },
            customerName(){
                return this.msg.customerName;
            },
            workerName(){
                return this.msg.workerName;
            },
            role(){
                return this.msg.role;
            },
            title(){
                return this.msg.title;
            },
            options(){
                let ret = [];
                if (this.msg.workers)
                {
                    ret.push({ value: null, text: '请选择处理师傅'});
                    for (var i = 0; i< this.msg.workers.length; i++){
                        ret.push({value:i, text: this.msg.workers[i].name});
                    }
                }
                return ret;
            },
            workerId(){
                return this.msg.workerId;
            }
        },
        methods: {
            myOk(){
                this.$router.go(0);
            },
            openWorkOrder(){
                this.$router.push({name: 'work-order', params: {'rid': this.oid}});
            },
            toAssignWorker(){
                assignWorker({
                    rid: this.oid,
                    wid: this.msg.workers[this.selected].uid
                })
                .then(res =>{
                    if (res.code === "1"){
                        this.showSaveSuccess = true;
                        setTimeout(() => {this.myOk()}, 2000);
                    } else {
                        this.showSaveFail = true;
                        console.log("assignWorkerFailed", res.msg);
                        return false;
                    }
                }).catch(err=>{
                    this.showSaveFail = true;
                    console.log("assignWorkerError", err);
                    return false;
                })
            }
        },
        watch:{
            msg: {
                handler: function (val) {
                    console.log("new msg", val);
                    this.data = {
                        tobeprocess: val.state === 'unset',
                        processing: val.state === 'set',
                        oid: val.oid,
                        houseName: val.houseName,
                        customerName: val.customerName,
                        workerName: val.workerName,
                        role: val.role,
                        title: val.title
                    }
                },
                deep: true
            }
        },
        mounted() {
            this.data = {
                tobeprocess: this.msg.state === 'unset',
                processing: this.msg.state === 'set',
                oid: this.msg.oid,
                houseName: this.msg.houseName,
                customerName: this.msg.customerName,
                workerName: this.msg.workerName,
                role: this.msg.role,
                title: this.msg.title
            }
        }
    }
</script>

<style scoped>

</style>
